<template>
  <div class="app-container">
    <div class="life-wrapper">
      <div class="life-wrapper-left">
        <dl class="life-menu-card">
          <el-card class="box-card" shadow="hover" size="small">
            <div slot="header" class="clearfix">
              <span class="title">选择产业</span>
            </div>

            <CheckboxAll :options="typeMenu" v-model="listQuery.checkedType" />
          </el-card>
        </dl>
        <dl class="life-menu-card">
          <el-card class="box-card" shadow="hover" size="small">
            <div slot="header" class="clearfix">
              <span class="title">选择细分产业层级</span>
            </div>
            <CheckboxAll :options="levelMenu" v-model="listQuery.checkedLevel" />
          </el-card>
        </dl>
        <dl class="life-menu-card">
          <el-card class="box-card" shadow="hover" size="small">
            <div slot="header" class="clearfix">
              <span class="title">选择产业生命周期</span>
            </div>
            <CheckboxAll :options="statusMenu" v-model="listQuery.checkedStatus" />
          </el-card>
        </dl>
      </div>
      <div class="life-wrapper-right">
        <div class="life-year">
          <el-select size="small" v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <IndustryEcharts :data="list" />
      </div>
    </div>
  </div>
</template>
<script>
import IndustryEcharts from "./components/IndustryEcharts.vue";
import CheckboxAll from "./components/CheckboxAll.vue";
import {
  echartsData,
  typeMenu,
  statusMenu,
  levelMenu
} from "@/Datas/echartsData";
console.log(echartsData);

const isArrayEmpty = arr => {
  return !arr || arr.length === 0;
};

export default {
  name: "",
  components: {
    IndustryEcharts,
    CheckboxAll
  },
  watch: {},
  data() {
    return {
      typeMenu,
      statusMenu,
      levelMenu,

      listQuery: {
        checkedType: [],
        checkedStatus: [1, 2,3],
        checkedLevel: []
      },
      tableData: [],
      // 传递给组件的数据
      cData: {
        xData: [],
        activeData: [],
        prevData: []
      },
      chartData: [],
      options: [{
        value: '2018',
        label: '2018'
      }, {
        value: '2019',
        label: '2019'
      }, {
        value: '2020',
        label: '2020'
      }, {
        value: '2021',
        label: '2021'
      }, {
        value: '2022',
        label: '2022'
      }],
      value: '2022'
    };
  },
  computed: {
    list() {
      const { checkedType, checkedStatus, checkedLevel } = this.listQuery;
      // 如果前端拿到全部数据处理，则用这个
      const isType = isArrayEmpty(checkedType);
      const isStatus = isArrayEmpty(checkedStatus);
      const isLevel = isArrayEmpty(checkedLevel);
      if (isType && isStatus && isLevel) {
        // 这里主要初次不要显示太多了不好看，后面可以删了
        return echartsData.slice(0, 10).sort((a, b) => a.status - b.status).map((v, index) => {
          v.title = v.name || ''
          v.name = index //v.name.replace(/\s/g, "")
          return v
        })
      } else {
        const lists= echartsData.filter(
          v =>
            (isStatus || checkedStatus.includes(v.status)) &&
            (isType || checkedType.includes(v.type)) &&
            (isLevel || checkedLevel.includes(v.level))
        ).sort((a, b) => a.status - b.status).map((v, index) => {
          console.log('不到这里了么');
          v.title = index
          v.name = v.name.replace(/\s/g, "")
          return v
        })
        console.log(lists);
        return lists
      }
    }
  },
  watch: {
    levelMenu(newval) { }
  },

  mounted() { },
  methods: {
    // 若每次点击调接口则用这个
    getList() { }
  }
};
</script>
<style lang="scss" scoped>
.life {
  &-wrapper {
    display: flex;
    height: 100%;

    &-left {
      width: 300px;
      background-color: #fff;
      padding: 20px 20px;
      overflow-y: auto;

      &::-webkit-scrollbar-track-piece {
        background: #d3dce6;
      }

      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background: #99a9bf;
        border-radius: 20px;
      }
    }

    &-right {
      flex: 1;
      width: 0;
      background-color: #fff;
      margin-left: 10px;
      position: relative;
    }
  }
}

.life-menu-card {
  padding: 0;
  margin: 0;
  margin-bottom: 15px;

  .title {
    font-size: 14px;
  }

  ::v-deep {
    .el-card__header {
      padding: 10px 10px;
    }
  }

  .checkbox-item {
    padding: 5px 0;
  }
}

.life-year {
  position: absolute;
  right: 10px;
  width: 180px;
  top: 25px;
  z-index: 99;
}</style>

